<template>
	<view>
		<view class="trace-header">
			<view class="trace-tou">
				<view class="trace-tou-image">
					
					<image :src="img+''" ></image>
					<text class="trace-tou-image-text">共{{sizes}}件商品</text>
				</view>
				<view class="trace-tou-text">
					<view class="">
						<text class="trace-tou-text1">配送企业 :</text>
						<text class="trace-tou-text2">{{wuliu.SHIPPERCODE}}</text>
					</view>
					<view class="">
						<text class="trace-tou-text1">快递单号 :</text>
						<text class="trace-tou-text2">{{wuliu.LOGISTICCODE}}</text>
					</view>
					
				</view>
			</view>
			
			<view class="trace-bu">
				<!-- <uni-steps :options="list1" :active="active" :startCity="startCity" :endCity="endCity" /> -->
				<uni-steps :options="list1" :active="active" />
			</view>
		</view>
		
		<view class="trace-item">
			<view class="trace-item-header">
					<text>物流详情</text>
			</view>
			<view class="trace-item-detail">
				<view class="uni-timeline" >
					<view class="uni-timeline-item uni-timeline-first-item" v-for="(item,index) in list" :key="index" v-if="index===0">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.AcceptStation}}</view>
							<view class="datetime">{{item.AcceptTime}}</view>
						</view>
					</view>
					<view class="uni-timeline-item" v-for="(item,index) in list" :key="index" v-if="index!==0 && index!==list.length-1">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.AcceptStation}}</view>
							<view class="datetime">{{item.AcceptTime}}</view>
						</view>
					</view>
					<view class="uni-timeline-item uni-timeline-last-item" v-for="(item,index) in list" :key="index" v-if="index===list.length-1">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.AcceptStation}}</view>
							<view class="datetime">{{item.AcceptTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				
				active: 1,
				list1: [{
					title: '已发货'
				}, {
					title: '运输中'
				},  {
					title: '已签收'
				}],
				list:'',
				wuliu:'',
				img:'',
				sizes:'',
			}
		},
		onLoad(option) {
			this.loadwuliu(option.id)
			this.loadDate(option.id,option.EXCHANEG)
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async loadwuliu(ORDERNUM){
				this.$http.post("/order/getDelivelyInformation",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
					ORDERNUM: ORDERNUM,
				}).then(e=>{
					console.log(">>>>>>>>>>>>>>>>",e);
					if(e.data.STATE === '0' && e.statusCode === 200){
						let list = e.data.OBJECT.LIST
						let list1 = list.map(item=>{
							return JSON.parse(item);
						})
						
						this.list = list1
						this.wuliu = e.data.OBJECT
						if(this.wuliu.STATE==1){
							//已揽收
							this.active = 0
						}else if(this.wuliu.STATE==2){
							//途中
							this.active = 1
						}else if(this.wuliu.STATE==3){
							this.active = 2
						}
					}else{
						uni.showToast({title:e.data.MSG, icon:"none"});
					}
				}).catch(err =>{
					console.log('request fail', err);
				})
			},
			async loadDate(ORDERNUM,EXCHANEG){
				//查询订单列表
				this.$http.post("/order/detail",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
					ORDERNUM: ORDERNUM,
					ISREDEEM: EXCHANEG
				}).then(e=>{
					console.log("********",e);
					
					if(e.data.STATE === '0' && e.statusCode === 200){
						// var list = e.data.OBJECT;
						this.img = e.data.OBJECT.GOODSLIST.map(item=>{
							return item.THUMB=getApp().globalData.imageAddress+item.THUMB;
						})
						this.sizes = e.data.OBJECT.GOODSLIST.length
					}else{
						uni.showToast({title:e.data.MSG, icon:"none"});
					}
				}).catch(err =>{
					console.log('request fail', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
		padding-bottom: 110upx;
	}
	.trace-header{
		background-color: #FFFFFF;
		padding: 0upx 30upx;
		margin-bottom: 25upx;
		.trace-tou{
			width: 100%;
			height: 220upx;
			background-color: #E02E24;
			display: flex;
			color: #ffffff;
			padding: 30upx 40upx;
			.trace-tou-image{
				position: relative;
				width: 160upx;
				height: 160upx;
				image{
					width: 100%;
					height: 100%;
				}
				.trace-tou-image-text{
					position: absolute;
					z-index: 8;
					color: #FFFFFF;
					background-color: #666666;
					left: 0upx;
					bottom: 0upx;
					font-size: 24upx;
					line-height: 50upx;
					width: 100%;
					text-align: center;
				}
			}
			.trace-tou-text{
				font-size: 28upx;
				line-height: 50upx;
				padding-left: 50upx;
				.trace-tou-text1{
					font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
					font-weight: 900;
				}
				.trace-tou-text2{
					margin-left: 10upx;
				}
			}
			
		}
		.trace-bu{
			padding: 20upx 30upx;
		}
		
	}
	
	.trace-item{
		background-color: #FFFFFF;
		padding: 0upx 60upx;
		.trace-item-header{
			color: #999999;
			font-size: 28upx;
			border-bottom: 1upx solid rgba(242, 242, 242, 1);
			line-height: 90upx;
		}
		.trace-item-detail{
			padding: 10upx 20upx;
			.uni-timeline { margin: 35upx 0; display: flex; flex-direction: column; position: relative; }
			.uni-timeline-item { display: flex; flex-direction: row; position: relative; padding-bottom: 40upx; box-sizing: border-box; overflow: hidden; font-size: 25upx;color: #999999;line-height: 40upx}
			.uni-timeline-item .uni-timeline-item-divider { flex-shrink: 0; position: relative; width: 20upx; height: 20upx;left: 3upx; top: 11upx; border-radius: 50%; background-color: #999999; }
			.uni-timeline-item-divider::before,
			.uni-timeline-item-divider::after { position: absolute; left: 11upx; width: 1upx; height: 100vh; content: ''; background: inherit; }
			.uni-timeline-item-divider::before { bottom: 100%; }
			.uni-timeline-item-divider::after { top: 100%; }
			.uni-timeline-first-item .uni-timeline-item-divider::after { left: 13upx;}
			.uni-timeline-first-item .uni-timeline-item-divider:before { display: none; }
			.uni-timeline-last-item .uni-timeline-item-divider:after { display: none; }
			.uni-timeline-item .uni-timeline-item-content { padding-left: 40upx; }
			.uni-timeline-item-content .datetime{ color: #CCCCCC; }
			/* 自定义节点颜色 */
			.uni-timeline-first-item .uni-timeline-item-divider{ background-color: #E02E24; width: 30upx; height: 30upx; left: 0upx;}
		}
	}
	
</style>
